import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {LineString, Point, Polygon} from 'ol/geom.js';
import {OGCMapTile, Vector as VectorSource} from 'ol/source.js';
import {
  Pointer as PointerInteraction,
  defaults as defaultInteractions,
} from 'ol/interaction.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import XYZ from "ol/source/XYZ";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import iconSrc from "@/assets/images/center-icon.png";

class Drag extends PointerInteraction {
  constructor() {
    super({
      handleDownEvent: handleDownEvent,
      handleDragEvent: handleDragEvent,
      handleMoveEvent: handleMoveEvent,
      handleUpEvent: handleUpEvent,
    });

    /**
     * @type {import("../src/ol/coordinate.js").Coordinate}
     * @private
     */
    this.coordinate_ = null;

    /**
     * @type {string|undefined}
     * @private
     */
    this.cursor_ = 'pointer';

    /**
     * @type {Feature}
     * @private
     */
    this.feature_ = null;

    /**
     * @type {string|undefined}
     * @private
     */
    this.previousCursor_ = undefined;

    this.dragCallBack=null;
    this.endCallBack=null;
  }
}

/**
 * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
 * @return {boolean} `true` to start the drag sequence.
 */
function handleDownEvent(evt) {
  const map = evt.map;

  const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
    return feature;
  });

  if (feature) {
    this.coordinate_ = evt.coordinate;
    this.feature_ = feature;
  }

  return !!feature;
}

/**
 * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event.
 */
function handleDragEvent(evt) {
  const deltaX = evt.coordinate[0] - this.coordinate_[0];
  const deltaY = evt.coordinate[1] - this.coordinate_[1];

  const geometry = this.feature_.getGeometry();
  geometry.translate(deltaX, deltaY);

  this.coordinate_[0] = evt.coordinate[0];
  this.coordinate_[1] = evt.coordinate[1];

  if (!!this.dragCallBack){
    this.dragCallBack(evt.coordinate[0] + "," + evt.coordinate[1]);
  }
}

/**
 * @param {import("../src/ol/MapBrowserEvent.js").default} evt Event.
 */
function handleMoveEvent(evt) {
  if (this.cursor_) {
    const map = evt.map;
    const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
      return feature;
    });
    const element = evt.map.getTargetElement();
    if (feature) {
      if (element.style.cursor != this.cursor_) {
        this.previousCursor_ = element.style.cursor;
        element.style.cursor = this.cursor_;
      }
    } else if (this.previousCursor_ !== undefined) {
      element.style.cursor = this.previousCursor_;
      this.previousCursor_ = undefined;
    }
  }
}

/**
 * @return {boolean} `false` to stop the drag sequence.
 */
function handleUpEvent() {
  this.coordinate_ = null;
  this.feature_ = null;
  return false;
}

let pointFeature = null;
let map = null;
export const dragMap=(element,centePos,mapInfo,dragCallBack,endCallBack)=>{
  const drag = new Drag();
  drag.dragCallBack = dragCallBack;
  drag.endCallBack = endCallBack;

  pointFeature = new Feature(
    new Point(centePos)
  );
  pointFeature.setStyle(
    new Style({
      // 设置一个标识
      image: new Icon({
        src: iconSrc,
        // 这个是相当于是进行切图了
        // size: [50,50],
        // 注意这个，竟然是比例 左上[0,0]  左下[0,1]  右下[1，1]
        anchor: [0.8, 0.8],
        // 这个直接就可以控制大小了
        scale: 0.8,
        // 开启转向
        rotateWithView: true,
        // rotation: 0,
      })
    })
  );


  if (!!map){
    map.setTarget(null);
    map.dispose()
    map = null;
  }

  map = new Map({
    interactions: defaultInteractions().extend([drag]),
    layers: [
      new TileLayer({
        source: new XYZ({
          url: mapInfo.sub.url[0],
        }),
      }),
      new VectorLayer({
        source: new VectorSource({
          features: [pointFeature],
        }),
      }),
    ],
    target: element,
    view: new View({
      projection: mapInfo.projection,
      center: centePos,
      zoom: 16,
    }),
  });
}

